》<template>
<div class="ww">
    <!-- 输入框把输入绑定到text -->
    <input v-model="text" placeholder="输入一些什么。。。。" />
    <h2>{{ Message }}</h2>
</div>
</template>

<script setup>
import {ref, watch} from 'vue'

const text = ref('')
const Message = ref('')

//监听 text 的改变
//计算属性允许声明性地计算值,但在数值改变时要执行其他一系列操作就要用到侦听器
//例如改变页面,改变其他地方的状态
//在Vue3的组合式API,我们用watch函数在每次响应式数据发生变化时触发函数.
//watch的基本结构：
//watch(监听的变量，函数)
watch(text, (newValue, oldValue) => {  
    Message.value = '侦听到改变了,从-' + oldValue + '-改成了-' + newValue
})
 
</script>

<style scoped>
.ww{
    background-color: rgb(234, 234, 234);
    border-radius: 10px;
    padding:20px;
}
</style>